@import '../../../core/index.less';

.customer-video-wrapper {
    position: relative;
    height: 650/@remScale;
    //height: auto;
    overflow: hidden;
    cursor: pointer;
    &:after {
        content: '';
        display: block;
        position: absolute;
        left: 0/@remScale;
        top: 0/@remScale;
        right: 0/@remScale;
        bottom: 0/@remScale;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    .img-wrapper {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    @media (max-width: @max4) {
        height: 600/@remScale;
    }
    @media (max-width: @max3) {
        height: 500/@remScale;
    }
    @media (max-width: @max2) {
        height: 500/@remScale;
    }
    @media (max-width: @max1) {
        height: 350/@remScale;
    }
    .switch-pause-content {
        z-index: 2;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #FFffff;
        .big-video-top-text {
            font-size: 32/@remScale;
        }
        .big-video-bottom-text {
            font-size: 32/@remScale;
            margin-top: 15/@remScale;
            margin-bottom: 30/@remScale;
        }
        .switch-pause-play-wrapper {
            position: relative;
            width: 50/@remScale;
            height: 50/@remScale;
            border-radius: 80/@remScale;
            cursor: pointer;
            border: 3/@remScale solid #FFFFFF;
            z-index: 2;
            transition: opacity .1s linear, visibility .3s linear;
            display: inline-block;
            &:hover {
                opacity: .7;
            }
            .switch-pause-play {
                border-top: 15/@remScale solid transparent;
                border-bottom: 15/@remScale solid transparent;
                border-right: 0/@remScale;
                border-left: 16/@remScale solid #FFffff;
                position: absolute;
                left: 60%;
                top: 50%;
                transform: translate(-60%, -50%);
            }

        }
    }

    video::-webkit-media-controls-fullscreen-button {

        display: none;

    }

    video::-webkit-media-controls-load-button {

        display: none;

    }

    video::-webkit-media-controls-panel {
        width: calc(100% + (50 / @remScale));
    }

    video::-webkit-media-controls {
        background-color: rgba(0, 0, 0, .2);
    }

    .control-wrapper {
        width: 80%;
        cursor: pointer;
        height: 3/@remScale;
        background-color: #888888;
        opacity: .8;
        position: absolute;
        border-radius: 2/@remScale;
        bottom: 10/@remScale;
        left: 50%;
        transform: translate(-50%, 0);
        .progress {
            position: relative;
            height: 100%;
            width: 0%;
            transition: width 0.05s ease;
            background-color: #FFffff;
        }
    }

    .img-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

@media (max-width: @max1) {
    .video-wrapper {
        position: relative;
        height: 200/@remScale;
        .switch-pause-content {
            .big-video-top-text {
                font-size: 24/@remScale;
            }
            .big-video-bottom-text {
                font-size: 24/@remScale;
                margin-top: 10/@remScale;
                margin-bottom: 20/@remScale;
            }
            .switch-pause-play-wrapper {
                position: relative;
                display: inline-block;
                width: 25/@remScale;
                height: 25/@remScale;
                border-radius: 15/@remScale;
                border: 3/@remScale solid #FFFFFF;
                z-index: 2;
                cursor: pointer;
                transition: opacity .1s linear, visibility .3s linear;
                &:hover {
                    opacity: .7;
                }
                .switch-pause-play {
                    border-top: 5/@remScale solid transparent;
                    border-bottom: 5/@remScale solid transparent;
                    border-right: 0/@remScale;
                    border-left: 6/@remScale solid #FFffff;
                    position: absolute;
                    left: 60%;
                    top: 50%;
                    transform: translate(-60%, -50%);
                }
            }
        }
    }
}


